<template>
  <el-dialog
    top="30px"
    width="600px"
    append-to-body
    title="准入信息"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="card p-3">
      <div class="d-flex">
        <div class="label">机构名称：</div>
        <div class="flex-1">{{ agencyName }}</div>
      </div>
      <div class="d-flex">
        <div class="label">机构评级：</div>
        <div class="flex-1">{{ accessInfo.rating }}</div>
      </div>
      <div class="d-flex">
        <div class="label">审批授权：</div>
        <div class="flex-1">{{ accessInfo.authorized_amount }} 万元</div>
      </div>
      <div class="d-flex">
        <div class="label">合作开始时间：</div>
        <div class="flex-1">
          {{ $utils.dateFormat(accessInfo.cooperate_date_start, 'yyyy-MM-dd') }}
        </div>
      </div>
      <div class="d-flex">
        <div class="label">合作结束时间：</div>
        <div class="flex-1">
          {{ $utils.dateFormat(accessInfo.cooperate_date_end, 'yyyy-MM-dd') }}
        </div>
      </div>
      <div class="d-flex">
        <div class="label">授信金额：</div>
        <div class="flex-1">{{ accessInfo.credit_amount }}</div>
      </div>
      <div class="d-flex">
        <div class="label">资本金：</div>
        <div class="flex-1">{{ accessInfo.margin_amount }}</div>
      </div>
      <div class="d-flex">
        <div class="label">附件：</div>
        <div class="flex-1">
          <span v-if="!attachment.length">-</span>
          <div v-for="(p, index) of attachment" @click="previewImg(index)" :key="index">
            <img :src="p" class="attachment-image" />
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
export default {
  props: {
    visible: Boolean,
    accessInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['clientId']),
    agencyName() {
      return this.accessInfo.access_agency_id === this.clientId
        ? this.accessInfo.service_agency_name
        : this.accessInfo.agency_name
    },
    attachment() {
      return arrayFromString(this.accessInfo.attachment)
    },
    images() {
      return this.attachment.map(item => {
        return { src: item }
      })
    },
  },
  created() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    previewImg(index) {
      this.$utils.viewer({
        images: this.images,
        index,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.label {
  text-align: right;
  min-width: 130px;
  margin-right: 10px;
  color: $gray-700;
}
.d-flex {
  line-height: 2.1rem;
}
.attachment-image {
  width: 120px;
  height: 120px;
  margin: 10px 10px 0px 0px;
}
</style>
